<template>
  <div class="register">
    <div class="top2">
      <h1>欢迎注册！</h1>
    </div>
    <van-form ref="regFrom">
      <van-cell-group inset class="username">
        <van-field
          v-model="fromValue.username"
          name="用户名"
          label="用户名"
          maxlength="4"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请输入用户名' }]"
        />
      </van-cell-group>
      <van-cell-group inset class="nickname">
        <van-field
          v-model="fromValue.phone"
          name="号码"
          maxlength="11"
          type="number"
          label="号码"
          placeholder="请输入电话号码"
          :rules="[{ required: true, message: '请输入电话号码' }]"
        />
      </van-cell-group>
      <van-cell-group inset class="password">
        <van-field
          v-model="fromValue.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
      </van-cell-group>
      <van-cell-group inset class="repassword">
        <van-field
          v-model="fromValue.rePassword"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="请确认密码"
          :rules="[{ required: true, message: '密码不一致' }]"
        />
      </van-cell-group>
      <van-cell-group inset class="VC">
        <van-field
          v-model="fromValue.vc"
          name="验证码"
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '验证码不正确，请重新输入' }]"
        />
      </van-cell-group>
      <p class="vvc">
        验证码:<span>{{ vc }}</span>
      </p>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          class="registerBtn"
          @click="onSubmit"
        >
          注册
        </van-button>
        <router-link to="/login">返回登录</router-link>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { getVC, register } from "@/api/register.js";
import { reactive, ref, onMounted } from "vue";
import { showFailToast, showSuccessToast } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();
// 定义响应式数据，通过v-mode1实现双向数据绑定
const fromValue = reactive({
  username: "",
  password: "",
  phone: "",
  rePassword: "",
  vc: "",
});
// 表单组件实例
const regFrom = ref(null);
// 验证码
const vc = ref("");
// 局部前置路由首位
onMounted(async () => {
  await getVC()
    .then((res) => {
      vc.value = res.data.Code;
    })
    .catch((err) => {
      console.log(err);
    });
});
// 定义onSubmit事件函数，给表单绑定提交事件，点击登录按钮时触发onSubmit事件
async function onSubmit() {
  await regFrom.value
    .validate()
    .then((res) => {
      if (fromValue.password === fromValue.rePassword) {
        if (fromValue.vc === vc.value) {
          // console.log("++++++++++++");
          register(
            fromValue.username,
            fromValue.phone,
            fromValue.password,
            fromValue.vc
          )
            .then((res) => {
              console.log(res);
              showSuccessToast("注册成功！");
              router.push({
                path: "/login",
                query: {
                  data: JSON.stringify({
                    phone: fromValue.phone,
                    password: fromValue.password,
                  }),
                },
              });
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          showFailToast("验证码输入不正确，请重新输入");
          getVC()
            .then((res) => {
              vc.value = res.data.Code;
            })
            .catch((err) => {
              console.log(err);
            });
        }
      } else {
        showFailToast("两次密码输入不一致");
        getVC()
          .then((res) => {
            vc.value = res.data.Code;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    })
    .catch((error) => {
      showFailToast(error[0].message);
    });
}
</script>

<style lang="less" scoped>
a {
  color: white;
  font-weight: bold;
}
body {
  height: 100%;
  .register {
    height: 100%;
    width: 100%;
    background-image: url("../assets/images/RegisterBG.jpeg");
    background-size: cover;
    overflow: hidden;
    .top2 {
      padding-left: 5.333vw;
      margin-top: 3.333vw;
      margin-bottom: 5.667vw;
      h1 {
        color: white;
        font-weight: bold;
        text-align: center;
      }
    }
  }
}
.username {
  margin-top: 6.667vw;
  margin-bottom: 6.667vw;
  // align-items: center;
}
.password {
  margin-bottom: 6.667vw;
}
.password {
  margin-bottom: 6.667vw;
}
.repassword {
  margin-bottom: 6.667vw;
}
.nickname {
  margin-bottom: 6.667vw;
}
.VC {
  margin-bottom: 2.667vw;
}
.registerBtn {
  margin-bottom: 4vw;
  font-size: 4.8vw;
  font-weight: bold;
}
.vvc {
  font-weight: bold;
  padding-left: 5.333vw;
  color: white;
  margin-bottom: 5.333vw;
  span {
    color: yellow;
    font-weight: bold;
  }
}
</style>
